<!-- vue3中，建议先写 script,再写 template,并且 volar 语法提示也是按照这个顺序 -->
<script>
export default {
  data() {
    return {
      mouse: {
        x: 0,
        y: 0,
      },
      count: 0,
    };
  },
  mounted() {
    // 页面渲染完成后，绑定鼠标移动事件
    // 从性能角度来看，页面销毁需要移除对应事件，所以绑定的方法需要存起来
    document.addEventListener('mousemove', this.mouseMove);
  },
  // 养成习惯，页面销毁时要移除对应的事件
  destroyed() {
    document.removeEventListener('mousemove', this.mouseMove);
  },
  methods: {
    mouseMove(e) {
      this.mouse.x = e.pageX;
      this.mouse.y = e.pageY;
    },

    add() {
      this.count++;
    },
  },
};
</script>

<template>
  <div>
    当前鼠标位置:
    <div>x: {{ mouse.x }}</div>
    <div>y: {{ mouse.y }}</div>

    当前点击次数: {{ count }}
    <button @click="add">+1</button>
  </div>
</template>
